<template>
	<view>
		<view class="marketplace_main"
			v-if="(goods.length > 0 || coupon.length > 0 || ad.length > 0 || swiper.length > 0)">
			<view class="marketplace_main_top">
				<!-- 头部标题 -->
				<view class="marketplace_main_top_heard">
					<view style="font-size: 35rpx;font-weight: bold;">
						{{heardTitleText}}
					</view>
					<view style="display: flex;justify-content: center;border: none;">
						<button class="merchants_main_top_heard_btn" size="mini" style="border: none;"
							plain="true">查看更多</button>
					</view>
				</view>
				<!-- 商品 -->
				<view class="marketplace_component_info_view" v-if="goods.length > 0">
					<view class="goods">
						<view v-if="goods.length !== 3 && !isScrollToEnd" class="right">右滑更多</view>
						<scroll-view class="marketplace_component_info_scroll_container" scroll-x="true"
							@scrolltolower="scrolltolower()" @scrolltoupper="scrolltoupper()">
							<view class="marketplace_component_info_container">
								<view v-for="(item,index) in goods" :key="index" class="marketplace_component_info_item"
									:data-text="item.url">
									<view class="marketplace_component_info_image_view">
										<image class="marketplace_component_info_image" v-if="item.thumb"
											:src="item.thumb"></image>
									</view>
									<view
										style="padding: 5upx 0;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;">
										<view class="marketplace_component_info_title">{{item.title}}</view>
										<view class="marketplace_component_info_price" :id="'productPrice'+(item.id)">
											<view style="align-self: flex-end;">￥</view>
											<view class="marketplace_component_info_price_text"
												style="align-self: flex-end;">{{item.price}}</view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view v-if="goods.length > 3 && isScrollToEnd" class="goodsLength">左滑更多</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<view v-if="coupon.length > 0" style="background-color: #fff;padding: 20rpx 0;">
			<scroll-view class="marketplace_component_info_scroll_container" scroll-x="true">
				<view v-for="(item,index) in (coupon)" :key="item.id" class="marketplace_vouchers_component_info">
					<view class="marketplace_vouchers_component_Msg">
						<image class="marketplace_vouchers_component_Msg_image" :src="item.thumb"></image>
					</view>
					<view class="marketplace_vouchers_component_split_line"></view>
					<view class="marketplace_vouchers_component_Deo">
						<button :id="item.id"
							style="background-color: #F08080;color: white;border-radius: 120rpx;margin-top: 15rpx;margin-bottom: 10rpx;padding: 0;width: 180rpx;font-size: 30rpx;"
							:data-text="item.url">立即领取</button>
					</view>
				</view>
			</scroll-view>
		</view>

		<view>
			<view class="marketplace_main_bottom">
				<!-- 轮播 -->
				<view class="marketplace_main_swiper" v-if="swiper.length > 0">
					<u-swiper :list="swiper" name='thumb' height="350" border-radius="0"></u-swiper>
				</view>
				<!-- 广告 -->
				<view class="marketplace_main_bottom_heard" v-if="ad.length > 0">
					<u-swiper :list="ad" name='thumb' interval="2400" height="350" border-radius="0"></u-swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isScrollToEnd: true,
				heardTitleText: "全品更懂你",
				heardBtnText: "",
				commodityType: false,
				vouchersType: false,
				raffleType: false,
				rointsRedemptionType: true,
				goods: [{
						id: 1,
						url: '',
						thumb: '../../../static/logo.png',
						title: '商品1',
						price: 10
					}, {
						id: 2,
						url: '',
						thumb: '../../../static/logo.png',
						title: '商品2',
						price: 100
					},
					{
						id: 3,
						url: '',
						thumb: '../../../static/logo.png',
						title: '商品3',
						price: 1000
					},
					{
						id: 4,
						url: '',
						thumb: '../../../static/logo.png',
						title: '商品4',
						price: 9999
					}
				],
				swiper: [{
					thumb: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					id: 1,
					title: '轮播1'
				}, {
					thumb: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					id: 2,
					title: '轮播2'
				}],
				coupon: [{
						id: 1,
						thumb: '../../../static/logo.png',
						url: '',
						title: '优惠券1'
					},
					{
						id: 2,
						thumb: '../../../static/logo.png',
						url: '',
						title: '优惠券2'
					},
					{
						id: 3,
						thumb: '../../../static/logo.png',
						url: '',
						title: '优惠券3'
					},
					{
						id: 4,
						thumb: '../../../static/logo.png',
						url: '',
						title: '优惠券4'
					},
				],
				commodityHidden: false,
				vouchersHidden: false,
				raffleHidden: false,
				ad: [{
					id: 1,
					thumb: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '推荐轮播1'
				}, {
					id: 2,
					thumb: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '推荐轮播2'
				}],
			};
		},
		methods: {
			scrolltoupper() {
				this.isScrollToEnd = true
			},
			scrolltolower(event) {
				this.isScrollToEnd = false
			},
		}
	}
</script>

<style lang="scss">
	.marketplace_main {
		border-radius: 6px;

	}

	.marketplace_main_top {
		padding: 20upx 30rpx;
		margin: 0 auto;
		background-color: #fff;
	}

	.marketplace_main_bottom {
		padding: 0 auto;
		margin: 0 auto;
	}

	.marketplace_main_top_heard {
		font-size: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 10rpx;
	}

	.merchants_main_top_heard_btn {
		font: small-caption;
		font-size: 25rpx;

	}

	.marketplace_component_info_view {
		background-color: #fff;

		.goods {
			display: flex;
			flex-direction: row;

			.right {
				margin-left: -30upx;
				text-align: center;
				align-items: center;
				display: flex;
				justify-content: center;
			}

			.goodsLength {
				text-align: center;
				align-items: center;
				display: flex;
				justify-content: center;
			}
		}
	}

	.marketplace_component_info_scroll_container {
		width: 100%;
		white-space: nowrap;
	}

	.marketplace_component_info_container {
		margin: 0 auto;
		padding: 0 auto;
	}

	.marketplace_component_info_item {
		display: inline-block;
		margin: 0 10rpx;
		margin-top: 10upx;
		text-align: center;
		border-radius: 20rpx;
	}

	.marketplace_component_info_image {
		width: 210rpx;
		height: 200rpx;
		border-radius: 20rpx;
		border: 1px solid #b9b9b9;
	}

	.marketplace_component_info_title {
		font-size: 30rpx;
		width: 210rpx;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: bold;
	}

	.marketplace_component_info_price {
		text-align: left;
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}

	.marketplace_component_info_price_text {
		font-size: 30rpx;
		width: 180rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.dataList {
		margin-top: 20rpx;
	}

	.marketplace_vouchers_component_info {
		margin: 0 10rpx;
		padding: 0 auto;
		width: 210rpx;
		display: inline-block;
		text-align: center;

	}

	.marketplace_vouchers_component_Msg_image {
		width: 180rpx;
		height: 160rpx;
		margin-top: 10rpx;
		border-radius: 15rpx;
	}

	.marketplace_vouchers_component_Msg {
		height: 180rpx;
		border-radius: 15rpx 15rpx 0 0;
		background: radial-gradient(circle at left bottom, transparent 16rpx, rgb(241, 231, 231) 0) left bottom/ 50% 100% no-repeat,
			radial-gradient(circle at right bottom, transparent 16rpx, rgb(241, 231, 231) 0) right bottom/50% 100% no-repeat;
	}

	.marketplace_vouchers_component_Deo {
		display: flex;
		border-radius: 0 0 15rpx 15rpx;
		background: radial-gradient(circle at left top, transparent 16rpx, rgb(241, 231, 231) 0) left top/ 50% 100% no-repeat,
			radial-gradient(circle at right top, transparent 16rpx, rgb(241, 231, 231) 0) right top/ 50% 100% no-repeat;
		background-repeat: no-repeat;

	}

	.marketplace_vouchers_component_split_line {
		position: relative;
		width: 170rpx;
		left: 15rpx;
		border-top: 2rpx dashed rgb(241, 231, 231);
	}

	.marketplace_main_bottom_heard {
		margin: 0 auto;
		padding: 0 auto;
		margin-top: 20rpx;
	}

	.marketplace_main_bottom_heard_image {
		width: 100%;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.marketplace_main_swiper {
		margin-top: 10rpx;
		padding: 0 auto;
		text-align: center;
	}

	.marketplace_main_swiper_swiper_item {
		display: block;

		justify-content: center;
		border: 1px solid red;
	}

	.swiper-item image {
		width: 100%;
		object-fit: cover;
		object-position: center;
	}

	.marketplace_main_swiperswiper_item_image {
		width: 100%;
		text-align: center;
	}
</style>